<template>
  <div class="app-container home" ref="myHome">
    <div class="target-time">
        <el-date-picker
          v-model="targetTime"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          @change="handleCommunityTime"
        ></el-date-picker>
      </div>
    <div id="screenfull" @click="toggleScreenfull">
      <i class="iconfont icon-fullscreen"></i>
    </div>
    <!-- 顶部布局 -->
    <!-- <img class="top-title-bg" src="@/assets/images/home/topTitle.png" alt=""> -->
    <div class="top-title">{{ title }}"筑基行动"挂图作战{{ todayTime }}

    </div>
    <div class="layout-container">

      <div class="top-layout layout">
        <HomeTask :target-time="targetTime"/>
      </div>
      <div class="main-layout">
        <!-- 左侧布局 营销业务统计-->
        <div class="left-layout layout">
          <!-- <HomeLeft /> -->
          <!-- <HomeBottom  @item-click="snailClick" /> -->
          <HomeBottom  @item-click="snailClick" :target-time="targetTime"/>
        </div>
        <!-- 中间布局 -->
        <!-- <div class="center-layout"> -->
        <!-- 中间布局顶部 地图-->
        <!-- <div class="center-layout-top layout">
          <HomeBottom />
        </div> -->
        <!-- 中间布局中间 营业部包区业务统计-->
        <!-- <div class="center-layout-center layout">
          <HomeRight />
        </div>
      </div> -->
        <!-- 右侧布局 小区业务数据统计排名-->
        <div class="right-layout layout">
          <div class="right-layout-top">
            <!-- <HomeCenter /> -->
            <HomeCenter :target-time="targetTime"/>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="营业部详情" width="60%">
      <div class="scroll-shell">
        <div class="list">
          <div class="item"
            :class="{  'first-bgc': item.rank == 1,  'second-bgc': item.rank == 2,  'third-bgc': item.rank == 3}"
            v-for="(item, index) in tableData" :key="index">
            <div class="rank">
              <img style="width: 50px;" v-if="item.rank == 1" src="@/assets/images/home/medal1.png" alt="">
              <img style="width: 50px;" v-else-if="item.rank == 2" src="@/assets/images/home/medal2.png" alt="">
              <img style="width: 50px;" v-else-if="item.rank == 3" src="@/assets/images/home/medal3.png" alt="">
              <!-- <el-tag class="rank-num" v-else type="info" effect="dark"> {{ item.rank }}</el-tag> -->
              <div class="rank-bg" v-else>
                <div class="rank-num">
                  {{ item.rank }}
                </div>
              </div>
            </div>
            <div class="info">
              <div class="info-top">
                <div class="top-name"
                  :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                  <i class="iconfont icon-ic_person_card24px"></i>
                  {{ item.salesman }}
                </div>
                <div class="top-number"
                  :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                  {{ item.number }}</div>
              </div>
              <div class="info-bottom">
                <div class="info-item">
                  <div class="info-item-title">全量融合</div>
                  <div class="info-item-value"
                    :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                    {{ item.fullFusion }}</div>
                </div>
                <div class="info-item">
                  <div class="info-item-title">FTTR</div>
                  <div class="info-item-value"
                    :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                    {{ item.fttr }}</div>
                </div>
                <div class="info-item">
                  <div class="info-item-title">合计</div>
                  <div class="info-item-value"
                    :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                    {{ item.total }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
      </div>
  </div>
</template>

<script>
import Title from "./components/Title";
import screenfull from "screenfull";
import HomeTask from "./components/HomeTask";
import HomeCenter from "./components/HomeCenter";
import HomeLeft from "./components/HomeLeft";
import HomeRight from "./components/HomeRight";
import HomeBottom from "./components/HomeBottom";
import { getDeptTree } from "@/api/system/user";
import { developVolume } from "@/api/api";
import store from "@/store";

let baseUrl =
  location.protocol +
  "//" +
  location.hostname +
  (location.port ? ":" + location.port : "");
export default {
  name: "Index",
  components: {
    Title,
    HomeTask,
    HomeCenter,
    HomeLeft,
    HomeRight,
    HomeBottom,
  },
  data() {
    return {
      title: "十里店营业部",
      // deptId: 219,
      deptId: store.state.user.deptId, //将缓存的用户id赋值给userId，用于查询营销人员
      todayTime: "",
      dialogVisible: false,
      tableData: [],
      targetTime: this.formatDate(),
    };
  },
  mounted() {
    //this.autoScroll();
    this.getDeptTree();
    this.getTodayTime();
  },
  methods: {
    formatDate(date = new Date()) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      },
    handleCommunityTime(time){
      if(time === null || time === ""){
        this.getTodayTime()
      }
      else{
        this.todayTime = time.replace(/-/g, "/");
      }

    },
    snailClick(item) {
        developVolume({ deptId: item.deptId, targetTime:this.targetTime }).then((res) => {
          if (res.length !== 0) {
            this.tableData = [];
            // console.log(res);
            // this.tableData = res;
            res.forEach((item,index) => {
              this.tableData.push({
                rank: index + 1,
                salesman: item.salesman,
                number: item.number,
                fullFusion: item.fullFusion == '' ? 0 : item.fullFusion,
								fttr: item.fttr == '' ? 0 : item.fttr,
								total: item.total == '' ? 0 : item.total,
              })
            });
            this.dialogVisible = true;
          }
          else {
            this.$message({
              message: '当前营业部无数据',
              type: 'error'
            });
          }
        });

      },
    toggleScreenfull() {
      // if (screenfull.enabled) {
      //   screenfull.toggle(document.getElementById("screenfull"));
      // }
      if (screenfull.isEnabled) {
        screenfull.toggle(this.$refs.myHome);
      }
    },
    getTodayTime() {
      var date = new Date();
      var year = date.getFullYear(); // 年份
      var month = date.getMonth() + 1; // 月份，返回值为0-11，所以需要加1
      var day = date.getDate(); // 日期

      // 对月份和日期进行补零
      month = month < 10 ? "0" + month : month.toString();
      day = day < 10 ? "0" + day : day.toString();

      this.todayTime = year + "/" + month + "/" + day;
    },
    getDeptTree() {
      getDeptTree({ deptId: this.deptId }).then((res) => {
        // console.log(res,'44444444444444444');
        this.title = res.data.deptName;
        // this.deptTree = res.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "../assets/fonts/iconfont.css";
.app-container {
  padding: 10px;
}

.home {
  width: 100%;
  height: calc(90vh);
  background: rgba(243, 242, 239, 1);
  background: url(../assets/images/home/bg2.png) rgba(243, 242, 239, 1)
    no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .target-time{
      position: absolute;
      top: 2.7%;
      right: 3%;
      z-index: 10;
    }
  #screenfull {
    position: absolute;
    top: 15px;
    right: 10px;
    z-index: 9999;
    cursor: pointer;
    .icon-fullscreen {
      font-size: 20px;
      color: #409eff;
    }
  }
  .layout {
    width: 100%;
    background: #fff;
    // border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 10px 18px;
    box-sizing: border-box;
  }
  .top-title-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 0;
  }
  .top-title {
    height: 5%;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 600;
    color: #409eff;
    font-family: PangMenZhengDao;
    writing-mode: horizontal-tb;
    filter: drop-shadow(rgba(0, 11, 27, 0.66) 1px 1px 6px)
      drop-shadow(rgb(95, 159, 255) 2px 1px 8px);
    color: rgb(255, 255, 255);
    word-spacing: 0px;
    letter-spacing: 4px;
    text-orientation: upright;
    user-select: text;

  }
  .layout-container {
    height: 94%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;



    .top-layout {
      width: 99%;
      height: 14%;
      margin: 0 auto;
      //margin-bottom: 16px;
    }

    .main-layout {
      width: 99%;
      margin: 0 auto;
      height: 84%;
      /* // flex-grow: 1; */
      display: flex;
      justify-content: space-between;
      flex-direction: row;

      // .filtr-selects {
      //   display: flex;
      //   justify-content: end;
      // }

      .left-layout {
        width: 49%;
        height: 97%;
        // .bar-svg {
        //   height: calc(100% - 75px);
        //   display: flex;
        //   flex-direction: column;
        //   justify-content: space-around;

        //   .bar-svg-item {
        //     margin-top: 8px;
        //     border-bottom: 2px solid rgba(0, 0, 0, 0.4);

        //     .bar-svg-item-title {
        //       font-size: 18px;
        //       color: #aeaeb2;
        //     }

        //     .bar-svg-item-num {
        //       display: flex;
        //       font-size: 28px;
        //       line-height: 35px;
        //       color: #000;
        //       font-weight: 600;
        //     }
        //   }
        // }
      }

      .center-layout {
        width: 36%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .center-layout-top {
          height: 49%;

          .map-img {
            width: 100%;
            height: 100%;
          }
        }

        .center-layout-center {
          height: 49%;
          position: relative;
        }

        .center-layout-bottom {
          position: relative;
          height: 26%;

          .filter-selects-bottom {
            position: absolute;
            top: 6px;
            right: 20px;
            width: 36%;

            .bottom-selects {
              width: 25%;
            }
          }
        }
      }

      .right-layout {
        width: 50%;
        height: 97%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .right-layout-top {
          position: relative;
          height: 100%;
        }

        .right-layout-center {
          height: 10%;
        }

        .right-layout-bottom {
          height: 35%;
        }
      }
    }
  }
}

::v-deep .el-table tr {
  background-color: #ecf5ff;
}
::v-deep .el-table {
  background-color: #ecf5ff;
}

::v-deep .el-slider__runway.disabled .el-slider__bar {
  background-color: #3e7af6 !important;
  cursor: default !important;
}

::v-deep .el-slider__runway.disabled .el-slider__button {
  border-color: #3e7af6 !important;
  cursor: pointer !important;
}

::v-deep .el-slider__runway.disabled .el-slider__button-wrapper:hover,
.el-slider__runway.disabled .el-slider__button-wrapper.hover {
  cursor: default !important;
}

::v-deep .el-select .el-input .el-select__caret {
  width: 12px;
}

::v-deep .el-input--suffix .el-input__inner {
  padding-right: 15px;
}

::v-deep .el-date-editor--daterange.el-input__inner {
  width: 226px;
}

::v-deep .el-image__inner.el-image__preview {
  object-fit: inherit !important;
}

::v-deep .el-table__cell {
  color: #000000; /* 设置字体颜色为绿色 */
  /* font-weight: 700; */
}

// 蓝色背景
::v-deep .el-progress--circle .el-progress__text {
  color: #fff;
}
::v-deep .bar-svg-item-title {
  color: #333;
}

::v-deep .bar-svg-item-num {
  color: #fff;
}
/*
@media screen and (max-width: 768px)  {

  .home{
    height: auto;
  }

  .main-layout{
    display: flex;
    flex-direction: column !important;
  }

  .top-layout{
    height: auto !important;
  }

  .left-layout{
    width: 100% !important;
  }

} */
</style>

<style scoped lang="scss">
  .scroll-shell {
    height: 750px;
    overflow: auto;
  }

  .list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    color: #303133;
  }

  .item {
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 1px solid #e6ebf5;
    border-radius: 4px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .rank {
      width: 45px;
      height: 45px;
      margin-right: 10px;

      .rank-bg {
        position: absolute;
        top: -20px;
        left: -20px;
        width: 70px;
        height: 70px;
        background-color: #bbbbbb;
        font-size: 20px;
        border-radius: 23px;

        .rank-num {
          position: absolute;
          top: 30px;
          left: 35px;
          font-size: 28px;
          color: #fff;
        }
      }
    }

    .info {
      width: 70%;

      .info-top {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .top-name {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;

          .iconfont {
            font-size: 24px;
            color: #3dc8fd;
            margin-right: 10px;
            font-weight: 400;
          }
        }

        .top-number {
          font-size: 18px;
          font-weight: 600;
        }
      }

      .info-bottom {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 5px;

        .info-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 16px;

          .info-item-title {
            margin-top: 5px;
            color: #3dc8fd;
          }

          .info-item-value {
            margin-top: 5px;
            font-size: 20px;
          }
        }
      }
    }
  }

  .first-color {
    color: #fcb521;
  }

  .second-color {
    color: #98aabc;
  }

  .third-color {
    color: #dcac77;
  }

  .first-bgc {
    background-color: #fff9db;
  }

  .second-bgc {
    background-color: #ffebeb;
  }

  .third-bgc {
    background-color: #f8f0e0;
  }
</style>
